{% extends "base.html" %}
{% load staticfiles %}
{% block title %}首页{% endblock %}
{% block css %}
    <style rel="stylesheet">
        {#sm applies to x-small devices (portrait phones, less than 576px)#}
        @media (max-width: 575.98px) {
            .phone {
                display: none;
            }
        }

    </style>
{% endblock %}
{% block index %}active{% endblock %}
{% block content %}
    {% if danger_goods %}
        <div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                 class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img"
                 aria-label="Warning:">
                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
            </svg>
            <div>
                共有{{ danger_goods }}件商品库存少于{{ is_danger }},请及时补货。
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    {% endif %}
    {% if is_search %}
        <nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);"
             aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item ms-4  mt-3">首页</li>
                <li class="breadcrumb-item active  mt-3" aria-current="page">搜索结果</li>
            </ol>
        </nav>
    {% endif %}

    {% if goods_len %}
        <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col" class="phone">#</th>
            <th scope="col">商品名称</th>
            <th scope="col" class="phone">种类</th>
            <th scope="col">售价</th>
            <th scope="col">库存</th>
            <th scope="col">规格</th>
            <th scope="col">单位</th>
            <th scope="col">购买数量</th>
{#            <th scope="col">单独购买</th>#}
            <th scope="col">加入购物车</th>
        </tr>
        </thead>
        <tbody>
        {% for good in goods %}
            <tr>
                <td class="phone">{{ forloop.counter }}</td>
                <td>{{ good.name }}</td>
                <td class="phone">{{ good.category.name }}</td>
                <td>{{ good.selling_price }}</td>
                <td class="quantity_in_store">{{ good.quantity_in_store }}</td>
                <td>{{ good.specification }}</td>
                <td>{{ good.unit }}</td>
                <td><input type="number" value="0" class="sum" min="1" max="{{ good.quantity_in_store }}"></td>
{#                <td><button type="button" class="btn btn-primary singl" data-id="{{ good.id }}">单独购买</button></td>#}
                <td><button type="button" class="btn btn-danger add-cart" data-id="{{ good.id }}">加入购物车</button></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
        <div class="alert alert-primary d-flex align-items-center" role="alert">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                 class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img"
                 aria-label="Warning:">
                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
            </svg>
            <div>
                库存中没有商品或库存商品件数为 0， 请及时补货。
            </div>
        </div>
    {% endif %}

{% endblock %}
{% block js %}
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script>
        function is_denger() {
            if (Number($(this).text()) < {{ is_danger }}) {
                $(this).addClass("text-danger");
                $(this).addClass("fw-bold");

            }
        }
        $(".quantity_in_store").each(is_denger);

        info_cart = document.getElementById("cart-add");
        cart_animate = info_cart.animate([
            {opacity: 1},
            {opacity: 0}
        ], 2000);
        cart_animate.cancel();
        var table = document.getElementsByTagName("table")[0];
        table.onclick = function (e) {
            // 触发单独购买和加入购物车
            if (e.target.nodeName.toLowerCase() === "button") {
                var tr = e.target.parentNode.parentNode;
                if (e.target.classList.contains("singl")) {
                    // 单独购买
                    console.log(e.target.getAttribute("data-id"));
                }
                if (e.target.classList.contains("add-cart")) {
                    // 加入购物车

                    var sum_input = tr.querySelector(".sum");
                    // 如果输入框是0
                    if (!Number(sum_input.value)) return;
                    var quantity_in_store = tr.querySelector(".quantity_in_store");
                    var result_in_store = quantity_in_store.innerText - sum_input.value;
                    quantity_in_store.innerText = result_in_store;
                    if (Number(result_in_store) < {{ is_danger }}){
                        $(quantity_in_store).addClass("fw-bold");
                        $(quantity_in_store).addClass("text-danger");
                    }

                    // 减少限制的范围
                    sum_input.setAttribute("max", result_in_store);
                    if (!result_in_store) {
                        // 如果仓库没有了,禁用各种button
                        sum_input.setAttribute("disabled", "disabled");
                        {#tr.querySelector(".singl").setAttribute("disabled", "disabled");#}
                        tr.querySelector(".add-cart").setAttribute("disabled", "disabled");
                    }
                    $.ajax(
                        {
                            url: "/cart/add/",
                            data: {
                                id: e.target.getAttribute("data-id"),
                                amount: sum_input.value,
                                csrfmiddlewaretoken: $('input[name="csrfmiddlewaretoken"]').val(),
                            },
                            type: "post", success: function () {
                                // 购物车添加动画
                                cart_animate.cancel();
                                cart_animate.play();
                            }
                        }
                    );
                    // 重置输入框的数字, 放到最后
                    sum_input.value = 0;
                }
            }

        };
        table.onkeyup = function (e) {
            // 判断input框因用户随便输入导致数字溢出
            if (e.target.nodeName.toLowerCase() === "input") {
                if (Number(e.target.value < 1)) e.target.value = 1;
                if (Number(e.target.value) > Number(e.target.getAttribute("max"))) e.target.value = e.target.getAttribute("max");
            }
        }
    </script>
{% endblock %}